<template>
  <div class="flip-clock">
    <!-- 日期部分 -->
    <div class="date-section">
      <FlipItem :current="year.current[0]" :next="year.next[0]"/>
      <FlipItem :current="year.current[1]" :next="year.next[1]"/>
      <FlipItem :current="year.current[2]" :next="year.next[2]"/>
      <FlipItem :current="year.current[3]" :next="year.next[3]"/>
      <div class="colon">年</div>
      <FlipItem :current="month.current[0]" :next="month.next[0]"/>
      <FlipItem :current="month.current[1]" :next="month.next[1]"/>
      <div class="colon">月</div>
      <FlipItem :current="day.current[0]" :next="day.next[0]"/>
      <FlipItem :current="day.current[1]" :next="day.next[1]"/>
      <div class="colon">日</div>
    </div>
    
    <!-- 小时 -->
    <FlipItem :current="hours.current[0]" :next="hours.next[0]"/>
    <FlipItem :current="hours.current[1]" :next="hours.next[1]"/>
    <div class="colon">:</div>
    <!-- 分钟 -->
    <FlipItem :current="minutes.current[0]" :next="minutes.next[0]"/>
    <FlipItem :current="minutes.current[1]" :next="minutes.next[1]"/>
    <div class="colon">:</div>
    <!-- 秒 -->
    <FlipItem :current="seconds.current[0]" :next="seconds.next[0]"/>
    <FlipItem :current="seconds.current[1]" :next="seconds.next[1]"/>

    <!-- 周几部分 -->
    <div class="week-section" style="margin-left: .5em;">
        <div class="colon">星</div>
        <div class="colon">期</div>
        <FlipItem :current="week" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import FlipItem from './FlipItem.vue'

export default defineComponent({
  name: 'FlipClock',
  components: { FlipItem },
  props: {
    time: {
      type: String,
      default: '00:00:00' // 添加默认值
    }
    ,
    date: {  // 新增日期prop
      type: String,
      default: '2023-01-01'
    },
    week: {
        type: String,
        default: '一'
    }
  },
  setup(props) {
    // 确保props.time存在且格式正确
    const validTime = computed(() => {
      return props.time?.match(/\d{2}:\d{2}:\d{2}/)?.[0] || '00:00:00'
    })

    // 添加解构默认值
    const timeParts = computed(() => {
      const [h = '00', m = '00', s = '00'] = validTime.value.split(':')
      return [h, m, s]
    });

    // 修复类型转换逻辑
    const splitDigits = (value: string, max: number) => {
      const current = Math.min(Math.max(parseInt(value) || 0, 0), max-1)
      // 修正进位逻辑
      const next = (current + 1) % max === 0 ? max - 1 : (current + 1) % max
      return {
        current: current.toString().padStart(2, '0').split(''),
        next: next.toString().padStart(2, '0').split('')
      }
    }

    const splitDate = (dateStr: string) => {
        const [year, month, day] = dateStr.split('-')
        return {
            year: splitDigits(year, 9999),
            month: splitDigits(month, 12),
            day: splitDigits(day, 31)
        }
    }
    const dateParts = computed(() => splitDate(props.date))


    // 修复计算属性结构
    const hours = computed(() => splitDigits(timeParts.value[0], 24))
    const minutes = computed(() => splitDigits(timeParts.value[1], 60))
    const seconds = computed(() => splitDigits(timeParts.value[2], 60))
    

    return { 
        hours, 
        minutes, 
        seconds,
        year: dateParts.value.year,  // 返回日期数据
        month: dateParts.value.month,
        day: dateParts.value.day,
    }
  }
})
</script>

<style lang="scss" scoped>
.flip-clock {
    display: flex;
    align-items: center;  // 改为居中对齐
    gap: 0;  // 移除默认间距
    .date-section, .week-section  {
        display: flex;
        align-items: center;
        margin-right: .5em;
        
        .date-divider {
            color: #fff;
            margin: 0 0.2em;
            font-size: 0.8em;
        }
    }

    .colon {
        color: #fff; // 保持背景一致
        width: 2em;
        height: 2em;
        line-height: 2em;
        text-align: center;
        background-color: #409eff;
        color: #fff;
        margin: 0 .05em;
        border-radius: 5px;  // 匹配卡片圆角
    }
}
</style>

